<template>
  <div id="app">
    <router-view></router-view>
    <div class="decorate"></div>
    <div class="logo"></div>
    <footer class="footer">
      <span style="padding-left: 50px">中富竞娱文体科技有限公司  联系方式:400-110-1666</span>
      <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010602080025" target="_blank"><i></i>京公网安备 11010602080024号</a>
      <span style="padding-right: 50px">Copyright &copy;2014-2016 www.leyyx.cn</span>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
  #app {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #fff;
    overflow: hidden;
    background: url("assets/images/banner01.png") no-repeat center;
    background-size: cover;
  }

  .logo{
    position: absolute;
    top: 30px;
    left: 88px;
    width: 120px;
    height: 79px;
    background: url("assets/images/logo.png") no-repeat center;
    background-size: 120px 79px;
    z-index: 100;
  }

  .decorate {
    position: absolute;
    left: 0;
    top: -1px;
    width: 435px;
    height: 487px;
    background: url("assets/images/decorate.png") no-repeat center;
    background-size: 435px 487px;
    animation: dash 6s linear alternate infinite;
    z-index: 1;
  }

  @keyframes dash {
    0% {
      top: -1px;
      transform: scale(1)
    }
    25% {
      top: 25px;
      transform: scale(1.1)
    }
    50% {
      top: 50px;
      transform: scale(1.2)
    }
    75% {
      top: 25px;
      transform: scale(1.1)
    }
    100% {
      top: -1px;
      transform: scale(1)
    }
  }
  .footer{
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.92);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #aba7a7;
    font-size: 14px;
  }
  .footer a i{
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("assets/images/copy.png") no-repeat center;
    background-size: 20px 20px;
    vertical-align: middle;
    margin-bottom: 4px;
    margin-right: 5px;
  }
  @media screen and (max-width: 1366px) {
    .decorate {
      position: absolute;
      left: 0;
      top: -1px;
      width: 309px;
      height: 346px;
      background: url("assets/images/decorate.png") no-repeat center;
      background-size: 309px 346px;
      animation: dash 6s linear alternate infinite;
      z-index: 1;
    }
    @keyframes dash {
      0% {
        top: -1px;
        transform: scale(1)
      }
      25% {
        top: 18px;
        transform: scale(1.1)
      }
      50% {
        top: 36px;
        transform: scale(1.2)
      }
      75% {
        top: 18px;
        transform: scale(1.1)
      }
      100% {
        top: -1px;
        transform: scale(1)
      }
    }
    .footer{
      width: 100%;
      height: 36px;
      position: fixed;
      bottom: 0;
      left: 0;
      background-color: rgba(0,0,0,0.92);
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #aba7a7;
      font-size: 14px;
    }
    .footer a i{
      display: inline-block;
      width: 20px;
      height: 20px;
      background: url("assets/images/copy.png") no-repeat center;
      background-size: 20px 20px;
      vertical-align: middle;
      margin-bottom: 4px;
      margin-right: 5px;
    }
  }
</style>
